<template>
  <li class="list-group-item topic">
    <img width="30" height="30" :src="topic.author.avatar_url" alt="">

    <span class="label label-success" v-if="topic.top">置顶</span>
    <span v-else class="label label-info">{{formatTab}}</span>

    <div class="topic-detail">
      <p class="title">{{formatTitle}}</p>
      <div class="topic-info">
        <div class="count">
          <span class="reply_count text-danger">{{topic.reply_count}}</span> / <span class="visit_count">{{topic.visit_count}}</span>
        </div>
        <time class="text-muted">{{formatTime}}</time>
      </div>
    </div>
  </li>
</template>

<script>
export default {
  props: {
    topic: Object
  },
  computed: {
    formatTab () {
      // 把topic.tab转换为对应的中文
      const tab = this.topic.tab
      return tab === 'good' ? '精华' : tab === 'share' ? '分享' : tab === 'ask' ? '问答' : tab === 'job' ? '招聘' : '测试'
    },
    formatTitle () {
      const title = this.topic.title
      return title.length > 30 ? title.slice(0, 31) + '…' : title
    },
    formatTime () {
      const d = new Date(this.topic.last_reply_at)

      const time = d.getTime()
      const t = Math.floor((Date.now() - time) / 1000)

      return t < 60 ? t + '秒前' : t / 60 < 60 ? Math.floor(t / 60) + '分钟前' : t / 60 / 60 < 24 ? Math.floor(t / 60 / 60) + '小时前' : (d.getMonth() + 1) + "/" + d.getDate()

    }
  }
}
</script>

<style>
  .topic {
    display: flex;
    align-items: center;
  }
  .title {
    margin: 0;
  }
  .topic .label {
    margin: 0 10px;
  }
  .topic-detail {
    flex: 1;
  }

  .topic-info {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
  }
  .nav-pills a {
    padding: 5px 10px !important;
  }
  .panel {
    position: relative;
  }
  .list-group {
    min-height: 500px;
  }
  
</style>
